<template>
  <div class="dialog">
    <el-dialog
      :title="title"
      :visible.sync="visible"
      :close-on-click-modal="false"
      width="65%"
      top="20vh"
      @close="closeDialog"
    >
      <el-form
        :model="createForm"
        label-width="110px"
        label-suffix=":"
        class="leaveSearch"
        ref="createForm"
        :rules="rule"
      >
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="优惠券名称" prop="name">
              <el-input
                v-model.trim="createForm.name"
                placeholder="请输入优惠券名称"
                :disabled="title == '优惠券详情'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="优惠券类型" prop="type">
              <el-select
                v-model="createForm.type"
                size="small"
                filterable
                placeholder="请选择优惠券类型"
                :disabled="title == '优惠券详情'"
              >
                <el-option
                  v-for="item in typeList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="适用平台" prop="platform">
              <el-select
                v-model="createForm.platform"
                size="small"
                filterable
                placeholder="请选择适用平台"
                :disabled="title == '优惠券详情'"
              >
                <el-option
                  v-for="item in platformList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="平台类型" prop="platformType">
              <el-select
                v-model="createForm.platformType"
                size="small"
                filterable
                placeholder="请选择平台类型"
                :disabled="title == '优惠券详情'"
              >
                <el-option
                  v-for="item in platformTypeList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
           <el-col :span="12">
            <el-form-item label="总发行量" prop="publishCount">
              <el-input
                v-model.trim="createForm.publishCount"
                type="number"
                placeholder="请输入总发行量"
              ></el-input>
            </el-form-item>
          </el-col>
        <el-col :span="12">
            <el-form-item label="面额" prop="amount">
              <el-input
                v-model.trim="createForm.amount"
                placeholder="面值只能输入数字，限制2位小数"
              >
                <!-- @keydown.native="handleInput2" -->

              <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          </el-row>
        <el-row :gutter="24">
            <el-col :span="12">
            <el-form-item label="使用门槛" prop="minPoint">
              <el-input
                v-model.trim="createForm.minPoint"
                placeholder="只能输入正整数"
              >
              <template slot="prepend">满</template>
              <template slot="append">元可用</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="每人限领" prop="perLimit">
              <el-input
                v-model.trim="createForm.perLimit"
                type="number"
                min="0"
                placeholder="请输入每人限领"
              >
               <template slot="append">张</template>
              </el-input>
            </el-form-item>
          </el-col>
         </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="领取日期" prop="enableTime">
              <el-date-picker
                v-model.trim="createForm.enableTime"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="请选择领取日期"
                size="small"
              ></el-date-picker>
            </el-form-item>
          </el-col>
           <el-col :span="12">
            <el-form-item label="有效期">
              <el-form-item prop="startTime" class="time">
                <el-date-picker
                  v-model.trim="createForm.startTime"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="开始时间"
                  size="small"
                ></el-date-picker>
              </el-form-item>
              <span style="color: #606266">到</span>
              <el-form-item prop="endTime" class="time">
                <el-date-picker
                  v-model.trim="createForm.endTime"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="结束时间"
                  :change="compareDate()"
                  size="small"
                ></el-date-picker>
              </el-form-item>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="备注" prop="note">
              <el-input
                v-model.trim="createForm.note"
                type="textarea"
                placeholder="请输入备注"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="可使用商品" prop="useType" v-if="createForm.platformType == '1'">
              <el-radio-group v-model="createForm.useType" @change="getMaterialList">
                <el-radio-button v-for="(item,index) in useTypeList" :label="item.code" :key="index">{{item.name}}</el-radio-button>
              </el-radio-group>
            </el-form-item > 
            <el-form-item label="可使用商品" prop="useType" v-else>
              <el-radio-group v-model="createForm.useType" @change="getMaterialList">
                <el-radio-button v-for="(item,index) in useTypeMdList" :label="item.code" :key="index">{{item.name}}</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div v-if="showTable" style="padding-left: 12px;padding-right: 8px;">
        <el-button type="primary" @click="openDialog"  style="margin-bottom: 8px;">新增</el-button>
        <material-table
          ref="materialTable"
          :isShow="showTable"
          :hasData="mtrData"
          :mtrId="mtrId"
          :title="title"
        ></material-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog()">关 闭</el-button>
        <el-button
          type="primary"
          @click="confirmData('createForm')"
          v-if="title != '优惠券详情'"
          >保 存</el-button
        >
      </div>
    </el-dialog>
    <!-- 选择工器具弹框 -->
    <mar-table
      ref="MarTable"
      :is-show.sync="dialogVisible"
      :hasCheck="mtrData"
      @confirmMar="confirmMar"
    />
  </div>
</template>
<script>
import { validateC,validateF2 } from '@/utils/validate'
import {
  getSmsCouponListById,
} from '@/api/businessCo'
import materialTable from './component/materialTable.vue';
import MarTable from './component/marTable.vue';
export default {
  components: { materialTable, MarTable },
  name: 'addBrand',
  props: {
    row: {
      type: Object,
      default: {}
    },
    title: {
      type: String,
      default: ''
    },
    value: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      radio1:"",
      showTable:false,
      dialogVisible:false,
      checkData:[],
      mtrData:[],
      mtrId:"",
      visible: true,
      createForm: {
        id: "",
        amount: "",
        code: "",
        count:"",
        enableTime: "",
        endTime: "",
        memberLevel: 0,
        minPoint: "",
        name: "",
        note: "",
        perLimit:"",
        platform: "",
        platformType: "1",
        productRelationList: [],
        publishCount: "",
        receiveCount: "",
        startTime: "",
        storeId: "",
        type: "",
        useCount: "",
        useType: "",
      },
      platformList:[
        {
          code:0,
          name:'全部'
        },
        {
          code:1,
          name:'移动'
        },
        {
          code:2,
          name:'PC'
        }
      ],
      platformTypeList:[
        {
          code:'1',
          name:'运营平台'
        },
        {
          code:'2',
          name:'门店'
        }
      ],
      typeList:[
       {
          code:0,
          name:'全场赠券'
        },
        {
          code:1,
          name:'会员赠券'
        },
        {
          code:2,
          name:'购物赠券'
        },
        {
          code:3,
          name:'注册赠券'
        }
      ],
      useTypeList:[
        {
          code:0,
          name:'全场通用'
        },
        {
          code:1,
          name:'指定商品'
        }
      ],
      useTypeMdList:[
        {
          code:2,
          name:'门店工时费'
        },
      ],
      rule:{
        name: [
          { required: true, message: '请输入优惠券名称', trigger: 'blur' },
        ],
        type:[
          { required: true, message: '请选择优惠券类型', trigger: 'change' },
        ],
        platform:[
          { required: true, message: '请选择适用平台', trigger: 'change' },
        ],
        platformType:[
          { required: true, message: '请选择平台类型', trigger: 'change' },
        ],
        publishCount:[
          { required: true, message: '请输入总发行量', trigger: 'blur' },
        ],
        amount: [
          { required: true, message: '请输入面额', trigger: 'blur' },
          { validator: validateF2, trigger: 'blur' }
        ],
        minPoint: [
          { required: true, message: '请输入使用门槛', trigger: 'blur' },
          {  validator: validateC, trigger: 'blur' }
        ],
        perLimit: [
          { required: true, message: '请输入每人限领', trigger: 'blur' },
        ],
        enableTime:[
          { required: true, message: '请选择领取日期', trigger: 'change' },
        ],
        startTime:[
          { required: true, message: '请选择有效期开始时间', trigger: 'change' },
        ],
        endTime:[
          { required: true, message: '请选择有效期结束时间', trigger: 'change' },
        ],
        note: [
          { required: true, message: '请输入备注', trigger: 'blur' },
        ],
        useType:[
          { required: true, message: '请选择可使用商品', trigger: 'change' },
        ]
      }
    }
  },
  created() {
    if(this.row.id){
      this.mtrId = this.row.id;
      this.getDetail()
    }
  },
  mounted() {},
  methods: {
    handleInput2(e) {
      // 通过正则过滤小数点后两位
      e.target.value = (e.target.value.match(/^\d*(\.?\d{0,1})/g)[0]) || null
      value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')
    },
    getDetail(){
       if(this.mtrId){
        getSmsCouponListById(this.mtrId).then((res) => {
          const {code = null,data=undefined} = res.data;
          if (!code) {
            this.createForm = data;
            this.mtrData = data.productRelationList ?data.productRelationList:[];
            if(data.useType == '1'){
              this.showTable = true;
            }
          } else {
            this.$message.error('获取失败！');
          }
        });
      }
    },
    /**
     *  前后时间比较
     */
    compareDate() {
      if (
        this.createForm.startTime &&
        this.createForm.endTime &&
        this.createForm.startTime > this.createForm.endTime
      ) {
        this.$openMessage("结束时间不能小于开始时间！", "warning");
        this.createForm.endTime = "";
      }
    },
    confirmData(formName) {
      this.$refs[formName].validate((valid) => {
        if(valid) {
          if(this.createForm.useType == '1'){
            this.createForm.productRelationList = this.$refs.materialTable.dataList;
          }else{
            this.createForm.productRelationList = []
          }
          this.$emit('ok', this.createForm)
        }
      })
    },
    //选择--打开工器具弹框
    openDialog() {
      this.checkData = this.$refs.materialTable.dataList;
      this.dialogVisible = true;
    },
     //选择工器具
    confirmMar(rows) {
      this.mtrData = rows;
      this.$nextTick(() => {
        this.$forceUpdate();
        this.$refs.materialTable.getAlertList('1');
      });
    },
    getMaterialList(val){
      if(val == '1'){
        this.showTable = true;
      }else{
        this.showTable = false;
      }
    },
    closeDialog() {
      this.$emit('cancle')
    }
  }
}
</script>
<style scoped lang="less">
.el-select,.el-input-number,.el-cascader--medium {
  width: 100%!important;
  /deep/.el-input{
    width: 100%!important;
  }
}
.leaveSearch {
    .el-input {
        width: 100%;
    }
    .el-form-item {
      width: 100%;
      /deep/ .el-form-item__content {
          display: flex;
          .el-form-item {
            width: 48%;
            margin-bottom: 0 !important;
          }
       }
    }
}
</style>
